<template>
  <div class="login-wrapper">
    <div class="companyLogo">
      <img :src="companyLogo" alt="" />
    </div>
    <div class="login-container">
      <div class="form-container">
        <h1 class="title">
          <img :src="logoUrl" />
        </h1>
        <!--        <div class="welcome">-->
        <!--          <p>欢迎登录</p>-->
        <!--          <p>Welcome to login</p>-->
        <!--        </div>-->
        <LoginForm />
      </div>
    </div>
    <footer class="footer">Copyright © 2020 - 2023 Huilan Technology.All Rights Reserved</footer>
  </div>
</template>

<script>
import LoginForm from "./login";
const baseUrl = process.env.BASE_URL;
export default {
  name: "index",
  components: {
    LoginForm,
  },
  data() {
    return {
      // logoUrl: `${baseUrl}img/newLogo.png`,
      logoUrl: `${baseUrl}img/aihuman/logo.png`,
      companyLogo: `${baseUrl}img/companyLogo.png`,
    };
  },
};
</script>

<style lang="scss" scoped>
.login-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  //background: url('../../../../public/img/aioslogin/bg.jpg') center no-repeat;
  // background: url("~@/assets/aioslogin/newbg.jpg") center no-repeat;
  background: url("/aihuman/img/aihuman/aiHumanbg.jpg") center no-repeat;
  background-size: cover;
  position: relative;
}
.login-container {
  flex: 1;
  display: flex;
  padding: 0% 5%;
  align-items: center;
  justify-content: flex-end;
  background: none;
}
.companyLogo {
  position: absolute;
  left:50px;
  top:50px
}
//.left-view {
//  flex: 1;
//  //width: 60%;
//  height: 80%;
//  background: url('/img/aioslogin/viewImg.png') center no-repeat;
//  background-size: contain;
//}
//.right-view {
//  min-width: 30%;
//}
.form-container {
  margin-top: 45px;
  width: 390px;
  padding: 40px 60px;
  // background: rgba(255,255,255, 0.8);
  border-radius: 10px;
  margin-right: 75px;
  background: url("~@/assets/aioslogin/formbg.jpg") center no-repeat;
  box-shadow: 9px 25px 40px 15px #ebebeb;;

  .title {
    text-align: center;
    color: #303132;
    margin-bottom: 45px;

    img {
      width: 231px;
    }
  }
  .welcome {
    margin: 20px 0;
    text-align: center;
    color: #fff;

    p {
      margin: 0;

      &:first-child {
        font-size: 1.5em;
        font-weight: 700;
      }
    }
  }
}
.footer {
  height: 50px;
  text-align: center;
  color: #b7b7b7;
  font-size: 12px;
}
</style>
